<template>
  <div>
    <!-- 我的头部信息 -->
    <header class="header">
      <div class="semicircle"></div>
      <i class="set-icon"></i>
      <div class="personalInfo">
        <slot name="head-icon"></slot>
        <p class="nickName" v-show="userPhone">{{ userInfo.nickName }}</p>
        <p class="id" v-if="userPhone">{{ userInfo.id }}</p>
        <p class="id pleaseLogin" @click="toLogin()" v-else>请登录</p>
        <p class="fansVip"><i class="fansIcon"></i></p>
        <div class="myOperator">
          <van-row>
            <van-col span="8" v-for="(item, index) in arr" :key="index" @click="handleClick(item.myoperator)">
              <p class="num">{{ item.num }}</p>
              <p>{{ item.myoperator }}</p>
            </van-col>
          </van-row>
        </div>
      </div>
    </header>
  </div>
</template>
<script>
import {Toast} from "vant";

export default {
  props: ["userPhone"],
  data() {
    return {
      userInfo: { nickName: "", id: `` },
      arr: [],
    };
  },
  mounted() {
    if (!localStorage.getItem("telPhone")) {
      //如果没有id就渲染以下数据
      this.$axios
        .get("../../../static/json/my/myHead.json")
        .then((res) => {
          this.arr = res.data[0].unlogin;
        })
        .catch((err) => {
          console.log(err);
        });
    } else if (localStorage.getItem("telPhone")) {
      //反之渲染以下数据
      this.$axios
        .get("../../../static/json/my/myHead.json")
        .then((res) => {
          this.arr = res.data[1].login;
        })
        .catch((err) => {
          console.log(err);
        });
      //渲染用户信息
      this.$axios
        .get("/getNickName")
        .then((res) => {
          console.log(res.data.nickName);
          this.userInfo.nickName = res.data.nickName;
          this.userInfo.id = `ID:${res.data.id}`;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  methods: {
    toLogin() {
      this.$router.push({ path: "/login" }).catch(err => {});
    },
    // 点击跳转对应路由
    handleClick(title) {
        if(localStorage.getItem("telPhone") && title === '优惠券'){
            console.log("跳转订单确认页");
            this.$router.push({path:"coupon"}).catch(err=>{});
        }else{
            Toast('请先登录');
            this.$router.push({path:"login"}).catch(err=>{});
            console.log("登录页");
        }
    }
  },
};
</script>
<style lang="less" scoped>
.header {
  position: relative;
  width: 750px;
  height: 401px;
  background: #c62626;
  .set-icon {
    position: absolute;
    width: 34px;
    height: 38px;
    background: url(../../../static/images/mine/set-1x.png) no-repeat;
    background-size: contain;
    top: 65px;
    right: 30px;
  }
  .semicircle {
    position: absolute;
    width: 750px;
    height: 189px;
    background: #c62724;
    border-radius: 50%;
    top: 300px;
    left: 0;
  }
  .personalInfo {
    position: absolute;
    width: 710px;
    height: 354px;
    background: #ffffff;
    border-radius: 10px;
    left: 20px;
    top: 211px;
    .head-icon {
      position: absolute;
      width: 132px;
      height: 132px;
      border-radius: 50%;
      left: 289px;
      top: -55px;
    }
    .nickName {
      height: 34px;
      margin-top: 92px;
      font-size: 36px;
      font-weight: bold;
      text-indent: 303px;
      color: #000000;
      line-height: 30px;
    }
    .id {
      height: 21px;
      font-size: 26px;
      text-indent: 310px;
      font-weight: 500;
      color: #000000;
      line-height: 30px;
      margin-top: 18px;
    }
    .pleaseLogin {
      text-indent: 318px;
      width: 100%;
      margin-bottom: 10px;
      margin-top: 92px;
      color: gray;
    }
    .fansVip {
      position: relative;
      .fansIcon {
        position: absolute;
        width: 112px;
        height: 32px;
        background: url(../../../static/images/mine/fansvip-1x.png) no-repeat;
        background-size: contain;
        left: 315px;
        top: 15px;
      }
    }
    .myOperator {
      width: 100%;
      height: 115px;
      margin-top: 58px;
      text-align: center;
      color: #000;
      font-size: 30px;
      .num {
        margin-bottom: 10px;
        font-size: 36px;
      }
      .van-col {
        position: relative;
        &::after {
          position: absolute;
          content: "";
          width: 2px;
          height: 42px;
          background: #000000;
          opacity: 0.3;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
        }
        &:last-child::after {
          content: none;
        }
      }
    }
  }
}
</style>
